DraughtBoard for displaying draughts and chess on a webpage

I developed a set Javascript modules supporting the visual display of draughts on a webpage. I called it DraughtBoard. It is designed for the international 10x10 draughts but partially also for 8x8 draughts (checkers) and the chess game.
Its design goal is to display draughts, not to play draughts. Allthough DraughtBoard knows the rules of draughts, it has not the intelligence to play the game against an opponent.
This site will introduce you to applications which uses these Javascript modules.
I made three draughts PDN viewers which uses the PDN 3.0 standard for recording draughts games.
Two pages are dedicated to a draughts diagram maker for making images of a board.
Two similar diagram makers are made for the game of chess. A third tool allows you to easily make diagrams for fairy chess. Fairy chess is chess with unorthodox rules/pieces.
A final project is an application called Webdraughts. With webdraughts you can play a game. Moves are animated. It uses the websocket protocol to connect a remote player or to connect a draughts engine.

Modules of DraughtBoard.

1. Module for drawing a draughtboard.

2. Module for controlling a draughts game.

3. Module for draughts rules.

Of course the most important are the rules for moving and capturing. For captures it can be difficult to determine which capture is legal. Especially for captures where a king can capture many pieces. If multiple capture sequences are available, the system must select the sequence that captures the most pieces.

4. Module for parsing a FEN string.

A FEN string is a standard notation for specifying a position on the board. DraughtBoard can read a draughts position given as a FEN string. The FEN-string should meet the PDN 3.0 standard.
This module parses a FEN string, convert it to an internal format and takes care of error control.
For the chess game the FEN notation is much simpler to process than for draughts. So no special module is made to process a chess FEN string.

5. Module for parsing PDN text.

PDN (Portable Draught Notation) is a standard for the notation of a draughts game. This module parses PDN text, converts it to an internal format (a Javascript object) and takes care of error control.
The PDN text should meet the PDN 3.0 standard.
DraughtBoard uses a PDN parser which is generated by PEG.js 0.8.0 . To generate the parser I have used this input . You can make your own PDN parser by pasting your input in the online version of PEG.js

6. Module for converting a PDN text to a playable object.

This module depends on all previous modules.
The module parses a PDN text, report errors (if any), displays a draughtboard and creates a so called pdnObject. With this pdnObject and its methods it is easy to show the progress of a game.
I have made three pages which demonstrates the use of the pdnObject (see menu options).

  • PDN Viewer A shows the progress of a game on a structured way in a table.
  • PDN Viewer B shows the progress of a game in a syntax highlighted text.
  • PDN Viewer C is a copy of viewer A but utilizes the advantages of the HTML5 canvas element for displaying the board.

All PDN viewers outputs a text area 'parser status' which indicates how the parsing process has expired. It reports errors if the PDN text is not correct.
Also a text area 'parser output' is generated which shows the structure of the generated pdnObject (if you are interested).
The viewer pages can also be used as an online PDN checker to check the validity of a PDN file.

7. Module for creating an image of a draughts board.

This module creates a high resolution image of the board. To mail a draughts diagram to a friend, insert into your documentation or use it on a website.
The module uses the HTML5 canvas element. Predefined themes for displaying the board are available.
Two diagram makers are available (see menu options).

  • Board Image: for a detailed design of a board.
  • Draughts Diagram Maker: designed for ease and quickly create an image of the board.

The diagram makers can be configured with many options:

  • A position can be set with a standard FEN notation
  • Add or remove a piece by clicking one or more times on a square
  • Size of the board.
  • Many color themes for squares and borders.
  • Support of predefined piece image themes
  • Lines of text for top and bottom of the board

8. Module for creating an image of a chess board.

Looks like the module for creating an image of a draughts board.


Questions, remarks or suggestions? Please send a mail to: Arthur Kalverboer